<template>
    <div v-if="modelValue" class="dialog">
        <div class="dialog-header">
            <span> {{ title }}</span>
            <button @click="close">关闭</button>
        </div>
        <div class="dialog-main">
            {{ modelValue }}
        </div>
    </div>
</template>

<script setup lang="ts">
type Props = {
    modelValue: Boolean,
    title:string
}
defineProps<Props>()

const emit = defineEmits(['update:modelValue','update:title'])

const close = () => {
  emit('update:modelValue', false)
}

</script>

<script lang="ts">
export default {
    name: 'Dialog',
}
</script>


<style lang="scss" scoped>
.dialog {
    width: 400px;
    height: 250px;
    border: 1px solid #ccc;
    &-header {
        height: 40px;
        border: 1px solid #ccc;
    }
    &-body {
        height: 210px;
    }
}
</style>
 